<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label="分类">
            <category-cascader :categoryPath.sync="categoryPath"></category-cascader>
          </el-form-item>
          <el-form-item label="选择课程">
            <course-select style="width:160px"></course-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row v-if="isdata">
      <el-col :span="6">
        <el-input placeholder="输入关键字进行过滤" v-model="filterTextStep" style=" width: 90%;"></el-input>
        <el-tree
          :data="catalogAdd"
          node-key="stepId"
          :props="defaultPropsStepAdd"
          @node-click="handleNodeClickStepAdd"
          :expand-on-click-node="false"
          highlight-current
          :filter-node-method="filterNodeStep"
          ref="treeStep"
        ></el-tree>
      </el-col>
      <el-col :span="18">
        <el-tag
          type="success"
          style="font-size: 19px;
                  display: block;
                  text-align: center;"
        >{{tagLableName}}</el-tag>
        <Ueditor></Ueditor>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CategoryCascader from "../common/category-cascader";
import CourseSelect from "../common/course-select";
import Ueditor from "./catalogUeditor";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { CategoryCascader, CourseSelect, Ueditor },
  watch: {
    courseId(val) {
      if (val && val != 0) {
        console.log("课程->", val);
        this.$http({
          url: this.$http.adornUrl(`/ly/studystep/list/tree/${val}`),
          method: "get",
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          console.log("检测到courseId的改变", data);
          this.catalogAdd = data.data;
          this.isdata = true;
        });
      } else {
        this.isdata = false;
      }
    },
    filterTextStep(val) {
      this.$refs.treeStep.filter(val);
    }
  },
  data() {
    return {
      filterTextStep: "",
      tagLableName: "",
      categoryPath: [],
      courseId: 0,
      categoryId: 0,
      catPathSub: null,
      courseIdSub: null,
      isdata: false,
      catalogAdd: [],
      defaultPropsStepAdd: {
        children: "children",
        label: "stepName"
      },
      sendObjContent: {
        stepId: 0,
        data: {}
      }
    };
  },
  methods: {
    filterNodeStep(value, data) {
      if (!value) return true;
      return data.stepName.indexOf(value) !== -1;
    },
    handleNodeClickStepAdd(data) {
      console.log(data);
      this.tagLableName = data.stepName;
      this.stepId = data.stepId;
      //根据id查询数据库有没有数据，有显示，没有空
      this.$http({
        url: this.$http.adornUrl(
          `/ly/studystepreadcontent/list/info/${this.stepId}`
        ),
        method: "get",
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        console.log("返回的数据", data.data);
        //订阅消息，通知子组件data.data
        this.sendObjContent.stepId = this.stepId;
        this.sendObjContent.data = data.data;
        this.PubSub.publish("readContent", this.sendObjContent);
      });
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.catPathSub = PubSub.subscribe("catPath", (msg, val) => {
      this.categoryId = val[val.length - 1];
    });
    this.courseIdSub = PubSub.subscribe("courseId", (msg, val) => {
      this.courseId = val;
    });
  },
  beforeDestroy() {
    PubSub.unsubscribe(this.catPathSub);
    PubSub.unsubscribe(this.courseIdSub);
  }
};
</script>

<style>
</style>
